<script setup>

import store from "@/store.js";
import {useRouter} from "vue-router";

const router = useRouter()

const logout = () => {
  store.methods.exit(router)
}
</script>

<template>
<div class="header">
  <div class="header__nav">
          <router-link to="/" v-if="store.state.isLogin">Файлы пользователя</router-link>
          <router-link to="/shared" v-if="store.state.isLogin">Доступные файлы</router-link>
          <router-link to="/upload" v-if="store.state.isLogin">Загрузка файлов</router-link>

  </div>
    <div class="header__nav">
      <router-link to="/login" v-if="!store.state.isLogin">Логин</router-link>
      <router-link to="/registration" v-if="!store.state.isLogin">Регистрация</router-link>

      <a @click="logout" v-if="store.state.isLogin">Выйти</a>
    </div>
</div>
</template>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background: #42b883;
  width: 100%;
  height: 50px;
}

a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  cursor: pointer;
}

.header__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
</style>